<template>
    <div class="w_h_100">
        <div class="header d_f j_c_s_b">
            <el-page-header @back="cancel">
                <template #content>
                    <el-input v-model="name" placeholder="请输入流程名称" class="input" />
                </template>
            </el-page-header>
            <div>
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save" v-myRepeat>保 存</el-button>
            </div>
        </div>
        <div class="bottom p_r">
            <FormProcessDesigner ref="designer"></FormProcessDesigner>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { useRouter } from 'vue-router';
import FormProcessDesigner from './wflow/admin/FormProcessDesigner.vue'
import { ElMessageBox } from 'element-plus'
import { flowAdd } from '../../../../api/system/flowPath'
import { Message } from '../../../../utils/resetMessage'
import {flowPathFlowAddType} from '../../../../type/system'
export default defineComponent({
    name: '',
    components: {
        FormProcessDesigner,
    },
    setup() {
        const data:flowPathFlowAddType = reactive({
            scale: 100,
            name: '',
        })
        const router = useRouter()
        const designer = ref()
        onBeforeMount(() => {
        })
        const methods = {
            reduce() {
                if (data.scale <= 40) return
                data.scale -= 10
            },
            add() {
                if (data.scale >= 150) return
                data.scale += 10
            },
            //判断数据里面有没有pid，没得pid再次递归查找pid
            resetPid(arr, json, name) {
                arr.map((item: any, index: number) => {
                    if (!json) {
                        if (item.type != 'START') {
                            item.parentId = arr[index - 1].id
                        }
                    } if (json) {
                        if (index == 0 || name) {
                            item.parentId = json.id
                        } else {
                            item.parentId = arr[index - 1].id
                        }

                    }
                    if (item.props) {
                        if (item.props.branch) {
                            item.props.branch = methods.resetPid(item.props.branch, item, "GATEWAY")
                            if (item.branch) {
                                if (item.branch.length > 0) {
                                    item.branch.map((item1: any, index1: number) => {
                                        if (item1.length > 0) {
                                            item1 = methods.resetPid(item1, item.props.branch[index1], '')
                                        }
                                    })
                                }
                            }
                        }
                    }

                })
                return arr
            },
            save() {
                
                if (!data.name) {
                    Message({ type: 'error', message: '流程名称不能为空' })
                    return
                }
                let model = designer.value.doSave()
                model.name = data.name
                model.process = methods.resetPid(designer.value.doSave().process, '','')
                flowAdd({tenantId:"",definition:model}).then(() => {
                    Message({ type: 'success', message: '保存成功' })
                    router.push('/system/flowPath/flow/index')
                })
            },
            cancel() {
                ElMessageBox.confirm(
                    '当前信息将不再保存?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        router.push('/system/flowPath/flow/index')
                    })
            }
        }
        return {
            ...toRefs(data),
            ...methods, designer
        }
    }
})
</script>
<style scoped lang='scss'>
.header {
    width: calc(100% - 64px);
    padding: 24px 32px;
    background: #fff;
    border-radius: 6px;
}

.bottom {
    width: 100%;
    height: calc(100% - 120px);
    margin-top: 20px;
}
</style>